import React from 'react';
import {Button, Modal, Table} from 'antd';
import "../Table/react-bootstrap-table.min.css"
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import {getDicList} from "../../services/dictionaryServer";

class DicListModalContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableId: null,
      cname: null,
      bindDicId: null,
      visible: false,
      dics: []
    };
  }

  componentDidMount() {
    getDicList().then(function (json) {
      if (json) {
        this.setState({
          dics: json
        });
      }
    }.bind(this));
  }

  handleBindOk() {

    var bind = {
      columnName: this.state.cname,
      dicId: this.state.bindDicId,
      tableId: this.state.tableId
    }

    this.props.signal.dispatch(bind);

    this.setState({
      tableId: null,
      cname: null,
      bindDicId: null,
      visible: false,
    });
  }

  handleBindCancel() {
    this.setState({
      visible: false,
    });
  }

  onRowSelect(row) {
    this.setState({
      bindDicId: row["id"],
    });
  }

  render() {
    const {dics, visible} = this.state;

    const selectRowProp = {
      mode: 'radio',
      clickToSelect: true,
      onSelect: this.onRowSelect.bind(this),
    };

    return (
      <Modal ref="dics"
             visible={visible}
             width="650"
             title="字典列表" onOk={this.handleBindOk.bind(this)} onCancel={this.handleBindCancel.bind(this)}
             footer={[
               <Button key="back" type="ghost" onClick={this.handleBindCancel.bind(this)}>返
                 回</Button>,
               <Button loading={this.state.buttonLoading} key="submit" type="primary"
                       onClick={this.handleBindOk.bind(this)}>
                 关 联
               </Button>,
             ]}
      >
        <BootstrapTable data={ dics } selectRow={ selectRowProp } height='250'>
          <TableHeaderColumn dataField='id' isKey={ true } hidden={ true }>编号</TableHeaderColumn>
          <TableHeaderColumn dataField='name' width='150'>字典名称</TableHeaderColumn>
          <TableHeaderColumn dataField='comment'>说明</TableHeaderColumn>
        </BootstrapTable>
      </Modal>
    );
  }
}

export default DicListModalContainer;
